/*
 获取验证码组件
 @name:"陈小洋",
 @date:"2021.1.18"
* */
import React, {Component} from 'react';
import cssModule from './getCode.module.less'
import {Toast, NavBar, Icon} from 'antd-mobile';

let time = null; // 计时器
class GetCode extends Component {
    state = {
        account: "",
        outPut: [], // 外层input
        v1: "", // 码1
        v2: "", // 码2
        v3: "",
        v4: "",
        v5: "",
        v6: "",
        GetCodeIng: false, // 是否获取code中
        CountDown: 60, // 倒计时
    }
    // 获取验证码
    getCode = () => {
        this.setState({
            GetCodeIng: true
        })
        this.time = setInterval(() => {
            let count = Number(this.state.CountDown)
            if (count <= 0) {
                this.setState({
                    GetCodeIng: false,
                    CountDown: 60,
                })
                clearInterval(time)
                return
            }
            this.setState({
                GetCodeIng: true,
                CountDown: count - 1,
            })
        }, 1000)
    }
    // 监听外层input事件
    changeOutInput = (e) => {
        let outPut = e.target.value
        let arr = Array.from(outPut)
        console.log(Array.from(outPut))
        this.setState({
            outPut,
            v1: arr[0] || "",
            v2: arr[1] || "",
            v3: arr[2] || "",
            v4: arr[3] || "",
            v5: arr[4] || "",
            v6: arr[5] || ""

        })
        if (arr.length >= 6) {
            Toast.loading('校验中...', 1, () => {
                console.log('登录成功!!!');
            });
        }
    }


    render() {
        const {GetCodeIng, CountDown, outPut, v1, v2, v3, v4, v5, v6} = this.state;
        return (
            <div>
                {/*导航栏*/}
                <NavBar
                    mode="light"
                    icon={<Icon type="left" />}
                />


                {/*验证码*/}
                <div className={cssModule.GetCode}>
                    <text className={cssModule.Titles}>输入验证码</text>
                    <text className={cssModule.GetCodeTiptxt}>验证码已经发送至 + 15892023484</text>
                    {/*验证码输入框*/}
                    <div className={cssModule.codeBox}>
                        {/*一个大框*/}
                        <input
                            className={cssModule.outPut}
                            maxLength="6"
                            onChange={(val) => this.changeOutInput(val)}
                        />
                        {/*剩余6个框*/}
                        <view className={`${cssModule.codeTtem} ${outPut.length === 0 ? cssModule.codeItemActive : ''}`}>
                            {outPut.length === 0 ? (
                                <text className={cssModule.codeItemPlaceholderLine}/>) : ""}
                            <input className={cssModule.codeItemInput} maxLength="1" type="number" value={v1} disabled/>
                        </view>
                        <view className={`${cssModule.codeTtem} ${outPut.length === 1 ? cssModule.codeItemActive : ''}`}>
                            {outPut.length === 1 ? (
                                <text className={cssModule.codeItemPlaceholderLine}/>) : ""}
                            <input className={cssModule.codeItemInput} maxLength="1" type="number" value={v2} disabled/>
                        </view>

                        <view className={`${cssModule.codeTtem} ${outPut.length === 2 ? cssModule.codeItemActive : ''}`}>
                            {outPut.length === 2 ? (
                                <text className={cssModule.codeItemPlaceholderLine}/>) : ""}
                            <input className={cssModule.codeItemInput} maxLength="1" type="number" value={v3} disabled/>
                        </view>
                        <view className={`${cssModule.codeTtem} ${outPut.length === 3 ? cssModule.codeItemActive : ''}`}>
                            {outPut.length === 3 ? (
                                <text className={cssModule.codeItemPlaceholderLine}/>) : ""}
                            <input className={cssModule.codeItemInput} maxLength="1" type="number" value={v4} disabled/>
                        </view>
                        <view className={`${cssModule.codeTtem} ${outPut.length === 4 ? cssModule.codeItemActive : ''}`}>
                            {outPut.length === 4 ? (
                                <text className={cssModule.codeItemPlaceholderLine}/>) : ""}
                            <input className={cssModule.codeItemInput} maxLength="1" type="number" value={v5} disabled/>
                        </view>
                        <view className={`${cssModule.codeTtem} ${outPut.length === 5 ? cssModule.codeItemActive : ''}`}>
                            {outPut.length === 5 ? (
                                <text className={cssModule.codeItemPlaceholderLine}/>) : ""}
                            <input className={cssModule.codeItemInput} maxLength="1" type="number" value={v6} disabled/>
                        </view>
                    </div>
                    {/*获取验证码按钮---条件渲染部分*/}
                    {GetCodeIng === true ? (
                        <text className={cssModule.GetCodeReget}>{CountDown}秒后可重新获取</text>
                    ) : (
                        <text className={cssModule.GetCodeReget} onClick={this.getCode}>点击重新获取</text>
                    )}
                </div>
            </div>

        );
    }
}

export default GetCode;